<template>
  <div class="myClass">
    <!-- 标题栏 -->
    <mt-header fixed title="助教">
      <mt-button icon="back" slot="left" v-on:click="goBack"></mt-button>
    </mt-header>

    <!-- 用来给标题栏占位 -->
    <div style="height: 2.75rem;width: 100%;"></div>

    <!-- 汇总数据 -->
    <div class="dataNumber">
      <div>
        <p>正在管理学生：{{ info.total }}人（{{ info.money }}元/人）</p>
        <p>再管理{{ info.next_num }}个学生，每人津贴{{ info.next_mon }}元/人</p>
      </div>
    </div>

    <!-- 班级Item -->
    <div class="classItem" v-for="item in list" :key="item.id">
      <!-- 班级左边内容容器 -->
      <div class="classItemContextLayout">
        <!-- 封面 -->
        <div
          class="classItemImg"
          :style="{ backgroundImage: 'url(' + item.picture + ')' }"
        ></div>
        <!-- 内容 -->
        <div class="classItemContext">
          <p>{{ item.title }}</p>
          <div>
            <div>
              <p>班级：{{ item.name }}</p>
              <p>班群：{{ item.group }}</p>
              <p>学员人数：{{ item.user_num }}</p>
              <p>班级阶段：{{ item.plan }}/{{ item.phase }}</p>
            </div>
            <div>
              <p>班主任：{{ item.teacher }}</p>
              <p>津贴：{{ item.allowance }}</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 右边按钮 -->
      <div
        class="classItemButton"
        :class="[
          { classItemButtonOver: item.isOver },
          { classItemButton: !item.isOver }
        ]"
      >
        <span v-if="!item.isOver">正<br />在<br />上<br />课</span>
        <span v-else>已<br />结<br />业</span>
      </div>
    </div>

    <div style="height: 3.5625rem;"></div>
  </div>
</template>

<script>
import { Indicator } from "mint-ui";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      list: [],
      info: []
    };
  },
  created() {
    this.selectTeachList();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    selectTeachList() {
      //助教
      Indicator.open({ spinnerType: "fading-circle" });
      let me = this;
      this.$axios
        .post(
          "/api/home/teaching",
          {
            uid: localStorage.uid
          },
          {
            emulateJSON: true
          }
        )
        .then(kun => {
          console.log(kun);
          Indicator.close();
          if (kun.code == 200) {
            me.list = kun.data;
            me.info = kun.msg;
          } else {
            Toast(kun.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
p {
  margin: 0;
}

// 标题栏
.mint-header {
  height: 2.75rem;
  line-height: 1.25;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff7f5f+25,e5274d+75 */
  background: rgb(255, 127, 95);
  /* Old browsers */
  background: -moz-linear-gradient(
    -45deg,
    rgb(255, 127, 95) 25%,
    rgb(229, 39, 77) 75%
  );
  /* FF3.6-15 */
  background: -webkit-linear-gradient(
    -45deg,
    rgb(255, 127, 95) 25%,
    rgb(229, 39, 77) 75%
  );
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    135deg,
    rgb(255, 127, 95) 25%,
    rgb(229, 39, 77) 75%
  );
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7f5f', endColorstr='#e5274d', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}

// 汇总数据
.dataNumber {
  width: 21.5625rem;
  height: 3.125rem;
  margin: 0 auto;
  margin-top: 0.9375rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9375rem;
  color: #ffffff;
  background-image: url(../../assets/assistantBack.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;

  > div {
    text-align: center;

    > :last-child {
      font-size: 0.625rem;
    }
  }
}

// 班级Item
.classItem {
  width: 21.5625rem;
  height: 7.5rem;
  margin: 0 auto;
  margin-top: 0.9375rem;
  box-shadow: 0rem 0.125rem 0.5rem rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;

  // 左边内容容器
  .classItemContextLayout {
    height: 7.5rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 0.625rem;

    // 封面
    .classItemImg {
      width: 4.6875rem;
      height: 6.25rem;
      background-image: url(https://jpanese-project.oss-cn-chengdu.aliyuncs.com/public/myclass1.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      overflow: hidden;
    }

    // 内容
    .classItemContext {
      height: 6.25rem;
      margin-left: 0.625rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: #9a9a9a;
      font-size: 0.75rem;

      // 班级名称
      > :first-child {
        font-size: 0.8125rem;
        color: #343434;
      }

      // 子信息容器
      > :last-child {
        height: 100%;
        margin-top: 0.5rem;
        display: flex;
        justify-content: space-between;
        color: #9a9a9a;
        font-size: 0.75rem;

        // 子信息左边容器
        > :first-child {
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          > :last-child {
            color: #ff0000;
          }
        }

        > :last-child {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
      }
    }

    // 右侧内容
    .classItemContextRight {
    }
  }

  // 按钮
  .classItemButton {
    width: 3.0625rem;
    height: 7.5rem;
    color: #ffffff;
    font-size: 0.9375rem;
    line-height: 1.0625rem;
    display: flex;
    justify-content: center;
    align-items: center;

    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff8060+0,e5284e+100 */
    background: rgb(255, 128, 96);
    /* Old browsers */
    background: -moz-linear-gradient(
      top,
      rgb(255, 128, 96) 0%,
      rgb(229, 40, 78) 100%
    );
    /* FF3.6-15 */
    background: -webkit-linear-gradient(
      top,
      rgb(255, 128, 96) 0%,
      rgb(229, 40, 78) 100%
    );
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(
      to bottom,
      rgb(255, 128, 96) 0%,
      rgb(229, 40, 78) 100%
    );
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8060', endColorstr='#e5284e', GradientType=0);
    /* IE6-9 */
  }

  // 按钮
  .classItemButtonOver {
    width: 3.0625rem;
    height: 7.5rem;
    color: #ffffff;
    font-size: 0.9375rem;
    line-height: 1.0625rem;
    display: flex;
    justify-content: center;
    align-items: center;

    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffc4b4+0,f39aac+100 */
    background: rgb(255, 196, 180);
    /* Old browsers */
    background: -moz-linear-gradient(
      top,
      rgb(255, 196, 180) 0%,
      rgb(243, 154, 172) 100%
    );
    /* FF3.6-15 */
    background: -webkit-linear-gradient(
      top,
      rgb(255, 196, 180) 0%,
      rgb(243, 154, 172) 100%
    );
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(
      to bottom,
      rgb(255, 196, 180) 0%,
      rgb(243, 154, 172) 100%
    );
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc4b4', endColorstr='#f39aac', GradientType=0);
    /* IE6-9 */
  }
}
</style>
